<style lang="less">

</style>

<template>
  <ve-bmap
    :settings="chartSettings"
    :series="chartSeries"
    height="100%"
    :after-set-option-once="getMap">
    <slot></slot>
  </ve-bmap>
</template>

<script>
export default {
  name: 'VehicleMap',
  componentName: 'VehicleMap',
  data () {
    return {
      vehicles: [],
      markers: {},
      bmap: null,
      chartSettings: {
        key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',
        bmap: {
          center: [118.08, 24.48],
          zoom: 14,
          roam: true,
          mapStyle: {}
        }
      },
      chartSeries: [
        {
          type: 'scatter',
          coordinateSystem: 'bmap',
          data: [
            [120, 30, 1]
          ]
        }
      ]
    };
  },
  methods: {
    openInfo (p) {
      let content = '<ul>\n' +
          '\t\t<li>\n' +
          '\t\t\t车牌号码：\n' + p.plateNumber +
          '\t\t</li>\n' +
          '\t\t<li>\n' +
          '\t\t\t司机：\n' + p.driverName + '(' + p.driverPhone + ')' +
          '\t\t</li>\n' +
          '\t\t<li>\n' +
          '\t\t\t所属机构：\n' + p.organizationName +
          '\t\t</li>\n' +
          '\t\t<li>\n' +
          '\t\t\t当前位置：\n' + p.location +
          '\t\t</li>\n' +
          '\t\t<li>\n' +
          '\t\t\t定位时间：\n' + (p.timestamp ? new Date(p.timestamp).toJSON() : '') +
          '\t\t</li>\n' +
          '\t</ul>';
      let infoWindow = new window.BMap.InfoWindow(content);
      this.bmap.openInfoWindow(infoWindow, new window.BMap.Point(p.getPosition().lng, p.getPosition().lat));
    },
    addMarks (data) {
      let markers = {};
      this.bmap.clearOverlays();
      let myIcon = {
        'go': new window.BMap.Icon(require('../../assets/marker/go.png'), new window.BMap.Size(25, 25)),
        'static': new window.BMap.Icon(require('../../assets/marker/static.png'), new window.BMap.Size(25, 25)),
        'off-line': new window.BMap.Icon(require('../../assets/marker/off-line.png'), new window.BMap.Size(25, 25))
      };
      data.forEach(item => {
        let point = new window.BMap.Point(item.longitude, item.latitude);
        let marker = new window.BMap.Marker(point, {icon: myIcon[item.status]});
        marker.setRotation(item.heading);
        let label = new window.BMap.Label(item.plateNumber, {offset: new window.BMap.Size(-10, 25)});
        marker.setLabel(label);
        marker.plateNumber = item.plateNumber;
        marker.driverName = item.driverInfos.map(item => item.name).join(',');
        marker.driverPhone = item.driverInfos.map(item => item.phone).join(',');
        marker.location = item.location;
        marker.organizationName = item.organizationName;
        marker.timestamp = item.timestamp;
        this.bmap.addOverlay(marker);
        marker.addEventListener('click', (e) => {
          let p = e.target;
          this.openInfo(p);
        });
        markers[item.plateNumber] = marker;
      });
      this.markers = markers;
    },
    center (plateNumber, lng, lat) {
      let point = new window.BMap.Point(lng, lat);
      this.bmap.centerAndZoom(point, 15);
      this.openInfo(this.markers[plateNumber]);
    },
    getMap (echarts) {
      console.log(this.$props);
      this.bmap = echarts.getModel().getComponent('bmap').getBMap();
      this.bmap.addControl(new window.BMap.CityListControl());
      let point = new window.BMap.Point(118.103886, 24.489231);
      this.bmap.centerAndZoom(point, 12);
      this.$emit('map');
    }
  }
};
</script>
